<template>
  <div>
    <div class="weui-tab">
      <div class="weui-tab__panel">
        <div class="flex-around bu" v-if="nexttag">
          <div class="stepword-box">
            <span class="stepword">1</span>
            <img class="step" src="../../common/static/imgs/onestep.png" />
          </div>
          <div>第一步</div>
          <img src="../../common/static/imgs/xuline.png" alt />
          <div class="stepword-box">
            <span class="stepword">2</span>
            <img class="step" src="../../common/static/imgs/kong.png" />
          </div>
          <!-- <img class="step" src="../../common/static/imgs/twostep.png" /> -->
          <div>第二步</div>
        </div>
        <!-- 第二页面 -->
        <div class="flex-around bu" v-else>
          <img class="step" src="../../common/static/imgs/twostep.png" />
          <div>第一步</div>
          <img src="../../common/static/imgs/xuline.png" alt />
          <div class="stepword-box">
            <span class="stepword">2</span>
            <img class="step" src="../../common/static/imgs/onestep.png" />
          </div>
          <div>第二步</div>
        </div>
        <form bindsubmit="formSubmit" bindreset="formReset" v-if="nexttag">
          <div class="flex-left">
            <!-- <i class="icon-tab icon-tab-email"></i> -->
          </div>
          <!-- 文本输入框 -->
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研日期</label>
            </div>
            <div class="weui-cell__bd" @blur="  " @click="pink">
              <span
                :class="form.researchDate?'weui-input ':' weui-input defaultcolor'"
              >{{form.researchDate? moment(form.researchDate).format('YYYY-MM-DD'):'日期选择'}}</span>
              <img class="right-icon" src="../../common/static/imgs/time.png" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研企业或地点</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchPlace"
                name="username"
                placeholder="请输入调研企业或地点"
              />
              <img class="right-icon" src="../../common/static/imgs/house2.png" />
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">基本背景信息</label>
            </div>
          </div>
          <div class="weui-cell__bd">
            <textarea
              class="weui-textarea"
              v-model="form.researchBackgroud"
              placeholder="请输入被调研方的基本背景信息"
              rows="3"
              maxlength="500"
            ></textarea>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">联系人姓名</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchPerson"
                name="username"
                placeholder="请输入联系人姓名"
              />
              <img class="right-icon" src="../../common/static/imgs/person.png" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">联系人职务</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchPosition"
                name="username"
                placeholder="请输入联系人职务"
              />
              <img class="right-icon" src="../../common/static/imgs/zhiwu.png" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">联系人联系方式</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchContact"
                name="username"
                @blur="blurphone(form.researchContact,'researchContact')"
                placeholder="请输入联系人联系方式"
              />
              <img class="right-icon" src="../../common/static/imgs/phone.png" />
            </div>
          </div>
          <!-- <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label"></label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="username" placeholder="请输入联系人联系方式" />
              <img class="right-icon" src="../../common/static/imgs/phone.png" />
            </div>
          </div>-->
          <div v-for="(item, index) in form.otherSideList" :key="index">
            <div class="weui-cell">
              <div class="weui-cell__hd flex-left">
                <!-- <img class="start" src="../../common/static/imgs/start.png" /> -->
                <label class="weui-label">对方参与人员</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="item.otherSidePerson"
                  name="username"
                  placeholder="请输入对方参与人员姓名"
                />
                <img class="right-icon" src="../../common/static/imgs/personmore.png" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd flex-left">
                <!-- <img class="start" src="../../common/static/imgs/start.png" /> -->
                <label class="weui-label" style="width:119px">对方参与人员职务</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="item.otherSidePosition"
                  name="username"
                  placeholder="请输入对方参与人员职务
"
                />
                <img class="right-icon" src="../../common/static/imgs/zw.png" />
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__hd flex-left">
                <!-- <img class="start" src="../../common/static/imgs/phone.png" /> -->
                <label class="weui-label" style="width:119px">对方人员手机号</label>
              </div>
              <div class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="item.otherSideContact"
                  name="username"
                  @blur="blurphone(item.otherSideContact,'otherSideContact',index)"
                  placeholder="请输入对方联系人手机号"
                />
                <img class="right-icon" src="../../common/static/imgs/phone.png" />
              </div>
            </div>
            <div class="del" @click="removeFormItem(index)" v-if="index !== 0">
              <i class="icon-16 icon-16-clear"></i>删除对方参与人员
            </div>
          </div>

          <div class="phone-btn" @click="addFormItem">新增对方参与人员</div>

          <!-- 提交按钮 -->
          <div class="flex-around mt32">
            <div class="reset" @click="clear">重置</div>
            <div class="next" @click="onnext">下一步</div>
          </div>
        </form>
        <form bindsubmit="formSubmit" bindreset="formReset" v-else>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研主题</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchName"
                name="username"
                placeholder="请输入调研主题"
                maxlength="50"
              />
              <!-- <img class="right-icon" src="../../common/static/imgs/researchDate.png" /> -->
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label" style="width:140px">院内主要参与调研人员</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.researchParticipator"
                name="username"
                placeholder="请输入院内参与调研人员姓名，多个用逗号分隔"
              />
              <img class="right-icon" src="../../common/static/imgs/person.png" />
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">院内联系人</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.insiderContact"
                name="username"
                placeholder="请输入院内联系人"
              />
              <img class="right-icon" src="../../common/static/imgs/personmore.png" />
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研需求/痛点</label>
            </div>
          </div>
          <div class="weui-cell__bd">
            <textarea
              class="weui-textarea"
              v-model="form.researchDemand"
              placeholder="请输入被调研需求/痛点"
              rows="5"
              maxlength="500"
            ></textarea>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label" style="width:160px">调研数据/信息/结果概述</label>
            </div>
          </div>
          <div class="weui-cell__bd">
            <textarea
              class="weui-textarea"
              v-model="form.researchData"
              placeholder="请输入调研数据/信息/结果概述"
              rows="5"
              maxlength="500"
            ></textarea>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研行程单</label>
            </div>
          </div>
          <div class="weui-cell__bd" @click="choose('agenda')" v-if="type!=='see'">
            <div class="bghui">
              <img class="upload" src="../../common/static/imgs/upload.png" />
              <div class="label">调研行程单</div>
            </div>
          </div>

          <div class="weui-uploader mt24">
            <div class="weui-uploader__bd2">
              <ul>
                <li
                  class="weui-uploader__attachment"
                  v-for="(item,index) in form.agenda"
                  :key="index"
                >
                  <div class="weui-uploader__attachment-type">
                    <img class="weui-icons-filetype" src="../../common/static/imgs/file.png" />
                  </div>
                  <div class="weui-uploader__attachment_bd">
                    <p class="weui-uploader__attachment-title">{{item.originalName}}</p>
                    <p class="weui-uploader__attachment-size">{{item.fileSize}}</p>
                  </div>
                  <div
                    @click="delfile('agenda',index)"
                    class="weui-uploader__attachment-clear icon-24 icon-24-delete"
                  ></div>
                </li>
              </ul>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <img class="start" src="../../common/static/imgs/start.png" />
              <label class="weui-label">调研照片</label>
            </div>
          </div>

          <div class="weui-cell__bd" @click="onloadpic" v-if="type!=='see'">
            <div class="bghui">
              <img class="upload" src="../../common/static/imgs/phonto.png" />
              <div class="label">上传照片</div>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-uploader mt24">
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles">
                  <li class="weui-uploader__file" v-for="(item,index) in form.pic" :key="index">
                    <i class="icon-16 icon-16-clearImage" @click="delfile('pic',index)"></i>
                    <div
                      @click="previewImage(index,form.pic)"
                      class="weui-uploader__file-image"
                      :style="{ 
                          backgroundImage: `url(${item.fullUrl})`,
                          backgroundSize: 'cover',
                          backgroundPosition: 'center',
                          backgroundRepeat: 'no-repeat',
                          width:'100%'
                      }"
                    ></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <label class="weui-label">调研视频</label>
            </div>
          </div>
          <div class="weui-cell__bd">
            <div class="bghui">
              <img class="upload" src="../../common/static/imgs/vidio.png" />
              <div class="label">上传视频</div>
            </div>
          </div>-->
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <label class="weui-label">调研报告</label>
            </div>
          </div>
          <div class="weui-cell__bd" @click="choose('report')" v-if="type!=='see'">
            <div class="bghui">
              <img class="upload" src="../../common/static/imgs/upload.png" />
              <div class="label">上传报告</div>
            </div>
          </div>
          <div class="weui-uploader mt24">
            <div class="weui-uploader__bd2">
              <ul>
                <li
                  class="weui-uploader__attachment"
                  v-for="(item,index) in form.report"
                  :key="index"
                >
                  <div class="weui-uploader__attachment-type">
                    <img class="weui-icons-filetype" src="../../common/static/imgs/file.png" />
                  </div>
                  <div class="weui-uploader__attachment_bd">
                    <p class="weui-uploader__attachment-title">{{item.originalName}}</p>
                    <p class="weui-uploader__attachment-size">{{item.fileSize}}</p>
                  </div>
                  <div
                    @click="delfile('report',index)"
                    class="weui-uploader__attachment-clear icon-24 icon-24-delete"
                  ></div>
                </li>
              </ul>
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <label class="weui-label">资料名称</label>
            </div>
            <div class="weui-cell__bd">
              <input
                class="weui-input"
                v-model="form.documentName"
                name="username"
                placeholder="请输入资料"
              />
              <img class="right-icon" src="../../common/static/imgs/info.png" />
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <!-- <img class="start" src="../../common/static/imgs/start.png" /> -->
              <label class="weui-label" style="width:160px">内容描述</label>
            </div>
          </div>
          <div class="weui-cell__bd">
            <textarea
              class="weui-textarea"
              v-model="form.documentDesc"
              placeholder="请输入内容描述"
              rows="5"
              maxlength="500"
            ></textarea>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd flex-left">
              <label class="weui-label">添加资料或数据</label>
            </div>
          </div>
          <div class="weui-cell__bd" @click="choose('extra')" v-if="type!=='see'">
            <div class="bghui">
              <img class="upload" src="../../common/static/imgs/upload.png" />
              <div class="label">上传文件</div>
            </div>
          </div>
          <div class="weui-uploader mt24">
            <div class="weui-uploader__bd2">
              <ul>
                <li
                  class="weui-uploader__attachment"
                  v-for="(item,index) in form.extra"
                  :key="index"
                >
                  <div class="weui-uploader__attachment-type">
                    <img class="weui-icons-filetype" src="../../common/static/imgs/file.png" />
                  </div>
                  <div class="weui-uploader__attachment_bd">
                    <p class="weui-uploader__attachment-title">{{item.originalName}}</p>
                    <p class="weui-uploader__attachment-size">{{item.fileSize}}</p>
                  </div>
                  <div
                    @click="delfile('extra',index)"
                    class="weui-uploader__attachment-clear icon-24 icon-24-delete"
                  ></div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 提交按钮 -->
          <div class="flex-around mt32">
            <div formType="reset" @click="previousstep" class="reset">上一步</div>
            <div class="next" @click="submit" v-if="type!=='see'">提交</div>
            <div class="hui" @click="onSee" v-else-if="type=='see'">提交</div>
          </div>
        </form>
      </div>
      <div class="weui-tabbar" v-if="type=='add'">
        <a href="javascript:;" @click="divHome" class="weui-tabbar__item weui-bar__item">
          <span style="display: inline-block; position:relative;bottom:0">
            <img class="icon-tab-messageCurrent" src="../../common/static/imgs/home.png" />
          </span>
          <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
          <img class="icon-tab-messageCurrent" src="../../common/static/imgs/addactive.png" />
          <p class="weui-tabbar__label">新增</p>
        </a>
        <a href="javascript:;" @click="divMine" class="weui-tabbar__item">
          <span style="display: inline-block; position:relative;">
            <img class="icon-tab-messageCurrent" src="../../common/static/imgs/me.png" />
          </span>
          <p class="weui-tabbar__label">我的</p>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import { add, getdetails, edit } from '../../config/api/api';
import config from '../../config/api/config';
export default {
  data() {
    return {
      moment,
      nexttag: true,
      userId: '',
      type: 'add',
      form: {
        documentName: '',
        documentDesc: '',
        otherSideList: [
          {
            otherSidePerson: '',
            otherSidePosition: '',
            otherSideContact: '',
            remark: ''
          }
        ],
        researchDate: '',
        researchPlace: '',
        researchBackgroud: '',
        researchPerson: '',
        researchPosition: '',
        researchContact: '',
        researchName: '',
        researchParticipator: '',
        insiderContact: '',
        researchDemand: '',
        researchData: '',
        agenda: [],
        report: [],
        extra: [],
        pic: [],
        id: ''
      }
    };
  },
  created() {
    console.log(this.$route.query.keyword, 'see');
    if (this.$route.query.id) {
      this.type = this.$route.query.keyword;
      this.form.id = this.$route.query.id;
      this.feachdetails(this.$route.query.id);
    }

    this.type == 'edit'
      ? window.HWH5.setNavigationBarTitle({ title: '编辑申请' })
      : this.type == 'see'
      ? window.HWH5.setNavigationBarTitle({ title: '查看申请' })
      : window.HWH5.setNavigationBarTitle({ title: '新增申请' }),
      HWH5.getStorage('userInfo').then(data => {
        this.userId = data.userId;
      });
  },

  methods: {
    onSee() {
      HWH5.showToast({
        msg: '查看状态不可提交!',
        type: 'w'
      });
    },
    previewImage(index, piclist) {
      console.log(index, 'index', piclist);
      let arr = piclist.map(item => {
        return item.fullUrl;
      });

      console.log(arr, 'arr');
      HWH5.previewImage({
        index: index,
        imageArray: JSON.stringify(arr),
        watermark: true
      }).catch(error => {
        console.log('打开失败', error);
      });
    },
    feachdetails(id) {
      let data = {
        id
      };
      HWH5.showLoading();
      getdetails(data)
        .then(res => {
          this.form = { ...this.form, ...res.data };
          this.form.otherSideList = res.data.otherSidePersonList;
          let report =
            res.data.files.filter(item => item.fileType === '调研报告') || [];
          this.form.report = report;
          let agenda =
            res.data.files.filter(item => item.fileType === '调研行程单') || [];
          this.form.agenda = agenda;
          let extra =
            res.data.files.filter(item => item.fileType === '额外资料') || [];
          this.form.extra = extra;
          let pic =
            res.data.files.filter(item => item.fileType === '调研照片') || [];
          this.form.pic = pic;
          HWH5.hideLoading();
        })
        .catch(error => {
          console.error(error);
        });
    },
    blurphone(phone, type, index) {
      const isValid = this.validatePhoneNumber(phone);
      if (!phone) {
        HWH5.showToast({
          msg: '请输入手机号!',
          type: 'w'
        });
      }
      if (!isValid) {
        HWH5.showToast({
          msg: '请输入正确的手机号码!',
          type: 'w'
        });
        if (type === 'researchContact') {
          this.form.researchContact = '';
        } else if (type === 'otherSideContact') {
          this.form.otherSideList[index].otherSideContact = '';
        }
      }
    },
    validatePhoneNumber(phoneNumber) {
      // 定义手机号正则表达式
      const phoneRegex = /^1[3-9]\d{9}$/;

      // 使用test方法检查手机号是否符合格式
      if (phoneRegex.test(phoneNumber)) {
        console.log('手机号格式正确');
        return true;
      } else {
        console.log('手机号格式错误');
        return false;
      }
    },
    delfile(type, index) {
      this.form[type].splice(index, 1); // 移除指定索引的表单项
    },
    onloadpic() {
      if (this.form.pic.length > 5) {
        HWH5.showToast({
          msg: '照片最多上传6个！',
          type: 'w'
        });
        return false;
      }
      HWH5.chooseImage({
        flag: 1,
        imagePickerMode: 'IMAGE',
        maxSelectedCount: 1,
        showOrigin: false,
        btntxtEN: 'Done',
        btntxtCN: '完成',
        cameraFacing: 0,
        compress: '0.25'
      })
        // 使用这个文件路径进行上传
        .then(data => {
          const filePath = data[0];
          // const fileName = data[0].fileName;
          // const fileSize = data[0].fileSize;
          // const _appId = '20250901202802973718325';
          // const _appName = '调研信息共享系统系统';
          // const _userId = this.$store.state.home.userInfo.welinkUserId;
          HWH5.showLoading();
          HWH5.uploadFile({
            serverUrl: `${config.baseUrl}/common/uploadAppFile`, // 示例地址，非真实服务
            // http://111.56.172.130:18090
            filePath,
            name: 'file',
            // headers: {
            //   'X-HIC-info': `{"appId":${_appId},"appName":${_appName},"userId":${_userId}}`
            // },
            formData: {},
            progress: 1,
            onProgress: _data => {
              console.log(_data, '~~~data');
            }
          })
            .then(data => {
              this.form.pic.push({
                originalName: data.originalFilename,
                fileName: data.newFileName,
                url: data.url,
                fullUrl: data.fullUrl,
                datetime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
                // fileSize: fileSize
                // fileExtension: 'docx'
              });
              HWH5.hideLoading();
            })
            .catch(error => {
              console.log('HWH5.uploadFile上传异常', error);
              HWH5.hideLoading();
            })
            .finally(() => {
              HWH5.hideLoading();
            });
        })
        .catch(error => {
          console.log('getLocalFiles error = ', error);
        });
    },
    choose(type) {
      if (this.form[type].length > 2) {
        HWH5.showToast({
          msg: '文件最多上传3个！',
          type: 'w'
        });
        return false;
      }
      const that = this;
      HWH5.getLocalFiles({
        actionName: '确定',
        supportType: 'docx;pdf;doc;'
      })
        .then(data => {
          HWH5.showLoading();

          // if( data.fileSize> ){

          // }
          console.log('getLocalFiles success = ', data);
          const filePath = data[0].filePath;
          const fileName = data[0].fileName;
          const fileSize = data[0].fileSize;
          const _appId = '20250901202802973718325';
          const _appName = '调研信息共享系统系统';
          const _userId = this.$store.state.home.userInfo.welinkUserId;

          HWH5.uploadFile({
            serverUrl: `${config.baseUrl}/common/uploadAppFile`, // 示例地址，非真实服务
            // http://111.56.172.130:18090
            filePath,
            name: 'file',
            // headers: {
            //   'X-HIC-info': `{"appId":${_appId},"appName":${_appName},"userId":${_userId}}`
            // },
            // headers: {
            //   'Content-Type': 'multipart/form-data; charset=UTF-8'
            // },
            formData: {},
            progress: 1,
            onProgress: _data => {
              console.log(_data, '~~~data');
            }
          })
            .then(data => {
              if (data.code === 500) {
                HWH5.showToast({
                  msg: data.msg,
                  type: 'w'
                });
                return false;
              }
              that.form[type].push({
                originalName: data.originalFilename,
                fileName: fileName,
                url: data.url,
                datetime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
                fileSize: fileSize
                // fileExtension: 'docx'
              });
              console.log('服务端返回数据：', data);
              HWH5.hideLoading();
            })
            .catch(error => {
              HWH5.hideLoading();
              console.log('HWH5.uploadFile上传异常', error);
            });
        })
        .catch(error => {
          console.log('getLocalFiles error = ', error);
        })
        .finally(() => {
          HWH5.hideLoading();
        });
    },
    // 上传调研行程单
    onUpload() {},
    previousstep() {
      this.nexttag = true;
    },
    submit() {
      if (!this.form.researchName) {
        HWH5.showToast({
          msg: '请填写调研主题！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchParticipator) {
        HWH5.showToast({
          msg: '请填写院内主要参与人员！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.insiderContact) {
        HWH5.showToast({
          msg: '请填写院内联系人！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchDemand) {
        HWH5.showToast({
          msg: '请填写调研需求/痛点！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchData) {
        HWH5.showToast({
          msg: '请填写调研数据/信息/结果概述！',
          type: 'w'
        });
        return false;
      }
      if (this.form.agenda.length == 0) {
        HWH5.showToast({
          msg: '请上传调研行程单',
          type: 'w'
        });
        return false;
      }
      if (this.form.pic.length == 0) {
        HWH5.showToast({
          msg: '请上传调研照片！',
          type: 'w'
        });
        return false;
      }

      let data = {
        ...this.form,
        isApp: 1,
        userId: this.$store.state.home.userInfo.userId || this.userId
      };

      let api = this.type == 'edit' ? edit(data) : add(data);

      api
        .then(res => {
          if (res.code === 200) {
            HWH5.showToast({
              msg: this.type == 'edit' ? '编辑数据成功！' : '新增数据成功！',
              type: 'w'
            });
            this.clear();
            this.divMine();
          }
        })
        .catch(error => {
          HWH5.showToast({
            msg: error.message,
            type: 'w'
          });
          console.error(error);
        });
    },

    clear() {
      this.form = {
        documentName: '',
        documentDesc: '',
        otherSideList: [
          {
            otherSidePerson: '',
            otherSidePosition: '',
            otherSideContact: '',
            remark: ''
          }
        ],
        researchDate: '',
        researchPlace: '',
        researchBackgroud: '',
        researchPerson: '',
        researchPosition: '',
        researchContact: '',
        researchName: '',
        researchParticipator: '',
        insiderContact: '',
        researchDemand: '',
        researchData: '',
        agenda: [],
        report: [],
        extra: [],
        pic: []
      };
    },
    onnext() {
      // window.scrollTo({
      //   top: 0,
      //   behavior: 'smooth'
      // });
      // 数据拦截
      if (!this.form.researchDate) {
        HWH5.showToast({
          msg: '请选择调研时间！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchPlace) {
        HWH5.showToast({
          msg: '请选择调研企业或地点！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchBackgroud) {
        HWH5.showToast({
          msg: '请输入基本背景信息！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchPerson) {
        HWH5.showToast({
          msg: '请输入联系人姓名！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchPosition) {
        HWH5.showToast({
          msg: '请输入联系人职务！',
          type: 'w'
        });
        return false;
      }
      if (!this.form.researchContact) {
        HWH5.showToast({
          msg: '请输入联系人联系方式！',
          type: 'w'
        });
        return false;
      }

      this.nexttag = false;
    },
    next() {
      // 数据拦截

      // window.scrollTo({
      //   top: 0,
      //   behavior: 'smooth'
      // });
      this.nexttag = false;
    },
    removeFormItem(index) {
      this.form.otherSideList.splice(index, 1); // 移除指定索引的表单项
    },
    addFormItem() {
      if (this.form.otherSideList == 3) {
        HWH5.showToast({
          msg: '仅支持3个对方人员填写！',
          type: 'w'
        });
      } else {
        this.form.otherSideList.push({
          otherSidePerson: '',
          otherSidePosition: '',
          otherSideContact: ''
        }); // 添加一个新的空表单项
      }
    },
    pink() {
      let that = this;
      weui.datePicker({
        start: 2006,
        end: new Date().getFullYear(),
        defaultValue: [
          new Date().getFullYear(),
          new Date().getMonth() + 1,
          new Date().getDate()
        ],
        depth: 3,
        // onChange: function(result) {
        //   console.log(result);
        // },
        onConfirm: function(result) {
          that.form.researchDate = `${result[0].value}-${that.padNumber(
            result[1].value,
            2
          )}-${that.padNumber(result[2].value, 2)}`;
        }
      });
    },

    padNumber(num, totalLength) {
      return num.toString().padStart(totalLength, '0');
    },
    divHome() {
      this.$router.push('/home');
    },
    divMine() {
      this.$router.push('/mine');
    },
    divAdd() {
      this.$router.push('/add');
    }
  }
};
</script>  
<style lang="less" scoped>
.weui-tabbar__item {
  height: 55px;
}
.icon-tab-messageCurrent {
  width: 21px;
  height: 24px;
}
.weui-tabbar__label {
  color: #3d3d3d;
}
.weui-cell::before {
  border-top: 1px solid #ddd;
}

.weui-tab__panel {
  height: 100vh;
  padding: 16px;
  padding-bottom: 70px;
  .stepword-box {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
  }
  .stepword {
    color: #fff;
    position: absolute;
    font-size: 12px;
    margin: auto;
    width: 100%;
    height: 100%;
  }
  .step {
    width: 18px;
    height: 18px;
  }
  .upload {
    width: 24px;
    height: 24px;
    margin-top: 20px;
  }
  .bghui {
    width: 316px;
    height: 88px;
    border-radius: 4px;
    margin: auto;
    background: #f8f8f8;
    text-align: center;
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.37px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    color: #969696;
  }
  .bu {
    width: 272px;
    height: 41px;
    border-radius: 4px;
    background: rgba(237, 237, 237, 0.4);
    margin: auto;
    margin-bottom: 22px;
  }
  .del {
    margin-top: 24px;
    font-family: 'PingFangSC-Medium ';
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #333;
    width: 130px;
    height: 30px;
    border-radius: 30px;
    background: transparent;
    border: 1px solid #006eff;
    width: 100%;
    margin-top: 10px;
  }
  .phone-btn {
    margin-top: 24px;
    font-family: 'PingFangSC-Medium ';
    font-weight: 400;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #333;
    width: 130px;
    height: 30px;
    border-radius: 30px;
    background: transparent;
    border: 1px solid #006eff;
    width: 100%;
    margin-top: 10px;
  }
  .reset {
    border-radius: 10px;
    width: 100px;
    height: 38px;
    background: #ededed;
    line-height: 38px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #3d3d3d;
  }
  .next {
    border-radius: 10px;
    width: 100px;
    height: 38px;
    background: #006eff;
    line-height: 38px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
  }
  .hui {
    border-radius: 10px;
    width: 100px;
    height: 38px;
    background: #999999;
    line-height: 38px;
    font-family: Source Han Sans;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
  }
  .right-icon {
    position: absolute;
    right: 0px;
    top: 15px;
    width: 12px;
  }
  .start {
    width: 4.7px;
    height: 4.55px;
    margin-right: 3px;
  }
  .defaultcolor {
    color: #999999;
    text-align: center;
  }
  .weui-label {
    font-family: Source Han Sans;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.37px;
    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    color: #000000;
  }
  .weui-input {
    font-family: Source Han Sans;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: 0.37px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    color: #999999;
  }
  .weui-textarea {
    margin-left: 20px;
    width: 316px;
    height: 87px;
    background: #f8f8f8;
    font-size: 13px;
  }
}
</style>